import React from 'react'
// import ProgressView from "../../view/ProgressView";
// import PressTouch from '../../view/PressTouch'
import { MyButton } from '../../view/MyButton'
import styles from "../../css/task.module.css";
import Config from "../../Config";
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import { TaskRemain } from '../../view/TaskView'
import { Debt } from "../../const/imgs";
import { locationTo, back } from '../../utils/LocationUtil';
import { HintDialog } from '../../view/Dialog'
import * as locations from '../../const/locations'
import BaseScreen from '../BaseScreen';
import { giveup } from '../../service/TaskService'
import { getTOKEN } from '../../utils/StorageUtil'
import { subDateToMin} from '../../utils/CommomUtil'
class DebtView extends BaseScreen {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  IsAbandon = () => {
    this.showMsgDialog("你确定要放弃催收该案件吗");
  }
  abandon = () => {
    giveup({
      token: getTOKEN(),
      task_id: this.props.taskId
    })
      .then(
        res => {
         back()
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  render() {
    const { debtor_info, case_info, dept_info, task_info, dept_repayment_mode } = this.props.TaskInfo
    return (
      <div style={{ marginTop: '-10px' }}>
        {debtor_info &&
          <Zhaiwuren
            debtorInfo={debtor_info}
          />}
        {dept_info &&
          <Zhaiwu
            debtInfo={dept_info}
          />}
        {case_info &&
          <Anjian
            caseInfo={case_info}
          />}
        {dept_repayment_mode &&
          <RepayMethod
            repayMethod={dept_repayment_mode}
          />}
        {task_info &&
          <TaskInfo
            taskInfomation={task_info}
          />}

        <div style={{ height: '10px' }}></div>
        {task_info &&
          <TaskState taskInfomation={task_info} abandon={this.IsAbandon} />
        }
        {task_info &&
          <TaskDate taskInfomation={task_info} />
        }
        {task_info && parseInt(task_info.status) === 1 &&
          <TaskRemain expired_days={task_info.expired_days} />
        }
        <HintDialog
          ref="dialog"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
          operateClick={this.abandon}
        />
      </div>
    )
  }
}

const Zhaiwuren = ({ debtorInfo:
  {
    name, // 债务人姓名
    gender, // 债务人性别
    phone, // 债务人联系电话
  }
}) => {
  return (
    <div style={{ color: Config.fontColor }} >
      <div className={styles['debt_title']} >
        <img src={Debt.ZWRXX} alt='' />
        债务人信息
      </div>
      <div className={styles['debt_data']}>
        <div className={styles['debt_data_list']}>
          <div className={styles['debt_data_name']}>
            {name && name}
            <img src={gender === '女' ? Debt.W : Debt.M} alt='' style={{ marginLeft: '5px', width: '13px' }} />
          </div>
          <div className={styles['debt_data_phone']}>
            <img src={Debt.SJ} alt='' style={{ marginRight: '5px', width: '10px' }} />
            {phone && <a href={"tel:" + phone}>{phone}</a>}
            <img src={Debt.DH} alt='' style={{ marginLeft: '5px', width: '18px' }} />

          </div>
        </div>
      </div>

    </div>
  )
}

const Zhaiwu = ({
  debtInfo: {
    init_debt, // 初始债务金额
    overdue_day, // 逾期日期
    reward_ratio, // 奖金比例
    repayment_amount, // 已回款金额
  }
}) => {
  return (
    <div style={{ color: Config.fontColor }} >
      <div className={styles['debt_title']} >
        <img src={Debt.ZWXX} alt='' />
        债务信息
      </div>
      <div className={styles['debt_data']}>
        <div
          style={{
            height: '50px',
            display: 'flex',
            display: '-webkit-flex',
            justifyContent: 'center',
            webkitJustifyContent: 'center',
            alignItems: 'center',
            webkitAlignItems: 'center',
          }}
          className={styles['debt_data_list_item']}
        >
          <span
            style={{
              fontSize: '16px', marginRight: '4px', color: '#93a2ac',
            }}
          >催收金额
          </span>
          <span
            style={{
              fontSize: '16px', color: '#494b4d',
            }}
          >
            {init_debt && init_debt}
            <span style={{ fontSize: '10px' }}>元</span>
          </span>
        </div>
        <div
          style={{
            width: '30px',
            height: '2px',
            background: Config.BaseColor,
            margin: '-5px auto 0'
          }}
        >
        </div>

        <div
          className={styles['debt_data_list']}
          style={{
            display: 'flex',
            display: '-webkit-flex',
          }}
        >
          <div className={styles['debt_data_cell']}>
            <div style={{ display:'block',width: '100%' }}>
              <div className={styles['debt_key2']}>回款金额</div>
              <div className={styles['debt_value2']}>{repayment_amount}</div>
            </div>
          </div>
          <div className={styles['debt_data_cell']}>
            <div style={{display:'block', width: '100%' }}>
              <div className={styles['debt_key2']}>逾期天数</div>
              <div className={styles['debt_value2']}>{overdue_day}天</div>
            </div>
          </div>
          <div className={styles['debt_data_cell']}>
            <div style={{display:'block', width: '100%' }} >
              <div className={styles['debt_key2']}>奖金比例</div>
              <div className={styles['debt_value2']}>{reward_ratio / 100}%</div>
            </div>
          </div>
        </div>
        <div
          className={styles['quanbu']}
          onClick={() => {
            locationTo(locations.DEBTINFO)
          }}
        >
          查看全部
          <img src={Debt.CKQB} alt='' />
        </div>
      </div>
    </div>
  )
}
const Anjian = ({
  caseInfo: {
    commision_case_no, // 案件号
    start_time, // 案件开始时间
    expired_time, // 截止日期
    commission_name, // 委托方名称
    commision_batch_no, // 批次号
    commission_start_date, // 委托开始时间
    commission_end_date, // 委托结束时间
    current_collect_hands, // 当前手别
  }
}) => {
  return (
    <div style={{ color: Config.fontColor }} >
      <div className={styles['debt_title']}>
        <img src={Debt.AJXX} alt='' />
        案件信息
      </div>
      <div className={styles['debt_data']}>
        <div className={styles['debt_data_list']} >
          <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  案件编号：        </span>
            <span className={styles['debt_value']}>   {commision_case_no}        </span>
          </div>
          <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  分配日期：        </span>
            <span className={styles['debt_value']}> {start_time}        </span>

          </div>
          <div className={styles['debt_data_list_item']}>
            <span className={styles['debt_key']}>  截止日期：        </span>
            <span className={styles['debt_value']}>  {expired_time}        </span>
          </div>
        </div>
        <div
          className={styles['quanbu']}
          onClick={() => {
            locationTo(locations.CASEINFO)
          }}
        >
          查看全部
          <img src={Debt.CKQB} alt='' />
        </div>
      </div>
    </div>
  )
}
const RepayMethod = ({ repayMethod }) => {
  return (
    <div style={{ color: Config.fontColor }} >
      <div className={styles['debt_title']}>
        <img src={Debt.HKFS} alt='' />
        还款方式
      </div>
      <div className={styles['debt_method']}>
        <div>
          {/* <span className={styles['debt_key']}> 【实时手工代扣】</span> */}
          <span className={styles['debt_value']}>{repayMethod}      </span>
        </div>

      </div>
    </div>
  )
}
const TaskInfo = ({
  taskInfomation: {
    status,   // 任务状态
    repay_amount,    // 已回款金额
    received_rwd,    // 已获得奖励
    start_time, // 任务开始时间
    end_time,    // 任务结束时间
    last_delay_status, // 最后申请延期状态 null(未申请过延期) 1(申请中) 2(已同意) 3(未通过)
  }

}) => {
  return (
    <div style={{ color: Config.fontColor }} >
      <div className={styles['debt_title']}>
        <img src={Debt.RWXX} alt='' />
        任务信息
      </div>
      <div className={styles['debt_method']}>
        <div
          className={styles['debt_data_method']}
          onClick={
            () => { locationTo(locations.REPAYLIST) }
          }
        >
          <span className={styles['debt_key']}>  回款金额(元)        </span>
          <span
            className={styles['debt_value']}
            style={{
              display: 'flex',
              alignItems: 'center',
            }}
          >
            {repay_amount}元
            <img src={Debt.YJT} alt='' style={{ width: '7px', marginLeft: '5px' }} />
          </span>
        </div>
        <div className={styles['debt_data_method']}>
          <span className={styles['debt_key']}> 奖金(元)        </span>
          <span className={styles['debt_value']}>  {received_rwd}元        </span>
        </div>
      </div>
    </div>
  )
}
const TaskState = ({
  abandon,
  taskInfomation: {
    status,   // 任务状态
  }
}) => {
  return (
    <div className={styles['debt_item2']} style={{ color: Config.fontColor }} >
      <div className={styles['debt_item2_left']}>
        <span className={styles['debt_key']}> 任务状态：        </span>
        <span className={styles['debt_value']}>
          {parseInt(status) === 1 && '催收中'}
          {parseInt(status) === 4 && '已结束'}
          {parseInt(status) === 3 && '已取消'}
          {parseInt(status) === 2 && '已放弃'}

        </span>
      </div>
      {parseInt(status) === 1 &&
        <div className={styles['debt_button']}>
          <MyButton
            style={selectedStyle}
            name={"放弃任务"}
            onClick={abandon}
          />
        </div>}

    </div>
  )
}
const TaskDate = ({
  taskInfomation: {
    status,   // 任务状态
    repay_amount,    // 已回款金额
    received_rwd,    // 已获得奖励
    start_time, // 任务开始时间
    end_time,    // 任务结束时间
    last_delay_status, // 最后申请延期状态 null(未申请过延期) 1(申请中) 2(已同意) 3(未通过)
  }

}) => {
  return (
    <div className={styles['debt_item2']} style={{ color: Config.fontColor }} >
      <div className={styles['debt_item2_left']}>
        <div>
          <span className={styles['debt_key']}> 开始时间：        </span>
          <span className={styles['debt_value']}>  {subDateToMin(start_time,16)}      </span>

        </div>
        <div>
          <span className={styles['debt_key']}> 结束时间：        </span>
          <span className={styles['debt_value']}>  {subDateToMin(end_time,16)}     </span>
        </div>
      </div>
      {parseInt(status) === 1 &&
        <div className={styles['debt_button']}>
          {parseInt(last_delay_status) !== 1 && <MyButton
            style={selectedStyle}
            name={"申请延期"}
            onClick={() => {
              locationTo(locations.PUTOFF)
            }}
          />}
          {parseInt(last_delay_status) === 1 && <MyButton
            style={selectedStyle}
            name={"审批中"}
            onClick={() => {
              locationTo(locations.PUTOFF)
            }}
          />}
        </div>}

    </div>
  )
}

const selectedStyle = {
  color: "#fff",
  background: Config.BaseColor,
  fontSize: '13px'
}


const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};
const mapDispatchToProps = dispatch => {
  return {
    setData(data) {
      let params = {
        TaskData: data
      };
      dispatch(Actions.actionTaskData(params));
    },
    TaskDetailTab(item) {
      let params = {
        taskDetailTabIndex: item.taskDetailTabIndex
      };
      dispatch(Actions.actionTaskDetailTab(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(DebtView);